<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vue实现轮播图,实际开发会进行组件化</title>
</head>
<style>

  .slide-view span{
    background-color: white;
    opacity: 0.3;
    position: absolute;
    font-size: 80px;
  }
  img{
    position: absolute;
    z-index: -1;
  }
  span.up-page{
    margin-left: 60px;
    margin-top: 200px;
  }
  span.next-page{
    margin-left: 660px;
    margin-top: 200px;
  }

  .slide-index{
    position: absolute;
    background-color: cornsilk;
    opacity: 0.6;
    margin-top:420px;
    margin-left: 30px;
    height: 30px;
    width: 100px;
    color: black;


  }
  .slide-index li{
    float: left;
    padding: 8px;
  }
  .active{
    color: red;
  }

</style>
<body>
  <div id="app" style="width: 800px;height: 500px; margin: 50px auto;display: flex">
    <div class="slide-content" >
      <div class="slide-view" style="position: relative">
        <a>
          <img  v-for="(item,index) in images" :key="index" @mouseenter="cleargo" @mouseleave="go"  :src="'img/'+item" v-show="n === index" alt="" style="width: 800px;height: 500px" />
        </a>
        <span class="up-page"  @mouseenter="cleargo" @mouseleave="go" @click="uppage">⬅</span>
        <span class="next-page"  @mouseenter="cleargo" @mouseleave="go"  @click="nextpage">➡</span>
        <ul class="slide-index">
          <li v-for="(v,index1) in images" :key="index1"  :class="n === index1 ? 'active' : ''" ></li>
        </ul>
      </div>
    </div>


  </div>
  <script src="js/vue.js"></script>
  <script>
    let vm=new Vue({
      el: '#app',
      data: {
        images: ['a.jpg','b.jpg','c.jpg','d.jpg','e.jpg','f.jpg',],
        n: 0,
        interId: null
      },

      methods: {
        go(){
          this.interId = setInterval(()=>{
            this.n = (this.n+1)%this.images.length;
          },2000)
        },
        cleargo(){
          clearInterval(this.interId)
        },
        uppage(){

          if(this.n === 0){
            this.n=this.images.length
          }
          this.n--;
        },
        nextpage(){
          this.n++;
          if(this.n === this.images.length){
            this.n = 0;
          }
        }
      },
      mounted(){//钩子函数，也叫生命周期函数 挂在完成操作
        this.go()
      }
    })
  </script>
</body>
</html>
